import React, {Component} from 'react';
import style from './Home.module.scss';
import { withRouter } from "react-router-dom";
import { Carousel } from "antd-mobile";
import {getHomeSwiperList,getHomeCatItems,getHomePicList} from '../../api/api';
import SearchInto from "../searchInto/SearchInto";



class Home extends Component {
    state={
        swiperList: [], // 首页轮播图的数据
        catItems:[], //首页导航数据
        picList:[] // 图片列表
    }
    toGoodsDetails=(goods_id)=>{
        this.props.history.push("goodDetail/"+goods_id);
    }
    toCategory=()=>{
        this.props.history.push('category');
    }
    toProductList=()=>{
        this.props.history.push("goodList?query="+"服装");
    }
    async componentDidMount() {
        let swiperList = await getHomeSwiperList();
        let catItems=await getHomeCatItems();
        let picList =await getHomePicList();
        this.setState((preState) => {
            return {
                swiperList: swiperList.message,
                catItems:catItems.message,
                picList:picList.message
            };
        });
    }

    render() {
        return (
            <div className={style.home}>
                <div className={style.titleBox}><span className={style.title}>畅想购</span></div>
                <SearchInto></SearchInto>
                <div>
                    <Carousel autoplay={true} infinite={true}>
                        {
                            this.state.swiperList.map((v)=>{
                                return (<img
                                    onClick={()=>{this.toGoodsDetails(v.goods_id)}}
                                    key={v.goods_id}
                                    src={v.image_src}
                                    alt=''
                                    style={{ width: "100%", verticalAlign: "top" }}
                                    onLoad={() => {
                                        window.dispatchEvent(new Event("resize"));
                                        this.setState({ imgHeight: "auto" });
                                    }}
                                />)
                            })
                        }
                    </Carousel>
                </div>
                <div className={style.cateItemBox}>
                    {
                        this.state.catItems.map((v)=>{
                            return (<div
                                onClick={this.toCategory}
                                key={v.image_src}
                                className={style.cateItem}
                            >
                                <img
                                    src={v.image_src}
                                    alt=''
                                    style={{width:'100%'}}
                                    onLoad={() => {
                                        window.dispatchEvent(new Event("resize"));
                                        this.setState({ imgHeight: "auto" });
                                    }}
                                />
                            </div>)
                        })
                    }
                </div>
                <div>
                    {
                        this.state.picList.map((v)=>{
                            return (<div
                                key={v.floor_title.image_src}
                            >
                                <div className={style.picListTitle}>
                                    <img src={v.floor_title.image_src} alt=""/>
                                </div>
                                <div className={style.picListBox}>
                                    {v.product_list.map((i)=>{
                                        return (<div
                                            key={i.image_src}
                                            className={style.picItem}
                                        >
                                            <img
                                                src={i.image_src}
                                                style={{width: '130%', height: '130%'}}
                                                onLoad={() => {
                                                    window.dispatchEvent(new Event("resize"));
                                                    this.setState({ imgHeight: "auto" });
                                                }}
                                                onClick={this.toProductList}
                                            />
                                        </div>)
                                    })}
                                </div>
                            </div>)
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Home);

